/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { Row, Col, DatePicker, Button, Tag, Divider, Card, Select, TreeSelect, Icon, message, Modal } from 'antd';
import MyTable from '../../../components/common/MyTable';
import Container from '../../../components/common/Container';
import PublicService from '../../../services/PublicService';
import request from '../../../utils/request';
import moment from 'moment';
import style from './WorkAll.less';
import MyPagination from '../../../components/common/MyPagination';
const provinceData = ['供应站点巡查', '商业用户巡查'];
const cityData = {
    供应站点巡查: ['董家沟供应站', '南湖二供应站', '杨园村供应站', '何家垅供应站'],
    商业用户巡查: ['#1商户', '#2商户', '#3商户'],
};
class WorkAll extends Component {
    constructor(props) {
        super(props)
        this.columns = [
            {
                title: '序号',
                dataIndex: 'num',
                width: '5%',
                align: "center",
                render: (text, record) => <span>
                {text}
                <span style={{ width: 5, height: 20, backgroundColor: record.colour, position: "absolute", left: 0 }}>
                </span>
            </span>
            },
            {
                title: '分配时间',
                dataIndex: 'takeTime',
                width: '10%',
                align: "center",
              
            },
            {
                title: '巡查人员',
                dataIndex: 'patrolPersonnelName',
                width: '10%',
                align: "center",
            },
            {
                title: '巡查任务',
                width: '10%',
                dataIndex: 'taskName',
                align: "center",
            },
            {
                title: '任务类型',
                width: '10%',
                dataIndex: 'taskType',
                align: "center",
                render: (text, record) => <span >{text == 1 ? "供应站点巡查" : "商业用户巡查"}</span>
            },
            {
                title: '预计完成时间',
                width: '15%',
                dataIndex: 'willFinishTime',
                align: "center",
            },
            {
                title: '实际完成时间',
                width: '10%',
                dataIndex: 'finishTime',
                align: "center",
            },
            {
                title: '完成状态',
                width: '10%',
                dataIndex: 'finished',
                align: "center",
                render: (text, record) => <span >{!text ? "未完成" : (text === 1 ? "已完成" : "已作废")}</span>

            },
            {
                title: '操作',
                dataIndex: 'criticalValue',
                width: '10%',
                align: "center",
                render: (text, record) => <span ><Tag onClick={this.onCheck.bind(this, record)} color="#87d068">查看</Tag></span>

            },

        ];

    }
    // <Tag onClick={this.onEdit.bind(this, record)} color="#108ee9">编辑</Tag> <Divider type="vertical" />
    state = {
        cities: cityData[provinceData[0]],
        secondCity: cityData[provinceData[0]][0],
        kcType2: "",
        kcType: 123,
        kcType1: 123,
        value: [],
        time: moment().format("YYYY-MM-DD"),
        date: moment(),
        loading: false,
        page: 1,
        rows: 10,
        total: 0,
        selectedRowKeys: [],
        selectedRows: [],
        dataSource: [],
        pageIndex: 1,
        pageSize: 10,
        treeData: [
        ],
        GroupArrMo: [],
        visible: false,
        startDate: null,
        endDate: null,
        finishTimeEnd: null,
        finishTimeStr: null,
        finished: "",
        patrolPersonnelId: "",
        signInWay: "",
        taskName: "",
        selectArr: [],
        rwtype: "供应站点巡查",
        typeTime: null
    }

    componentDidMount() {

        request({
            url: `/zhrq-web/gas/gaspandect/getGasSiteList`,
            method: 'POST',
            data: {}
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {

                this.setState({
                    treeData: data.ret.list
                })

                setTimeout(() => {
                    console.log(this.state.treeData)
                }, 1000);
            }
        })

        request({
            url: `/zhrq-web/patrol/patroltask/getPatrolPersonnelList`,
            method: 'GET',

        }).then(data => {
            console.log(data)
            if (data.rc == 0) {
                this.setState({
                    selectArr: data.ret
                })
            }
        })


        this.save(1, 10)
    }

    handleProvinceChange = (value) => {
        console.log()
        this.setState({
            cities: cityData[value],
            secondCity: cityData[value][0],
            rwtype: value
        });
    }

    onSecondCityChange = (value) => {
        this.setState({
            secondCity: value,
        });
    }

    showModal = () => {
        this.setState({
            visible: true,
        });
    }

    handleOk = (e) => {
        console.log(this.state.patrolPersonnelId, this.state.rwtype, this.state.secondCity, this.state.typeTime);
        if (this.state.patrolPersonnelId && this.state.rwtype && this.state.secondCity && this.state.typeTime) {
            let data = {
                baseUserId: 1,
                patrolPersonnelId: this.state.patrolPersonnelId,
                taskName: this.state.secondCity,
                takeTime: moment().format("YYYY-MM-DD HH:mm:ss"),
                taskType: this.state.rwtype === '供应站点巡查' ? 1 : 2,
                willFinishTime: moment(this.state.typeTime).format("YYYY-MM-DD HH:mm:ss")
            }

            request({
                url: `/zhrq-web/patrol/patroltask/insertList`,
                method: 'POST',
                data: [data]
            }).then(data => {
                console.log(data)
                if (data.rc === 0) {
                    message.success("新增成功")
                  
                    this.save(1, 10)
                    this.setState({
                        visible: false,
                    });
                }
            })

        } else {
            message.warning("请补全分配任务信息!")
            return
        }

    }

    handleCancel = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }


    //编辑
    onEdit = (record) => {
        console.log(record)
        PublicService.setCookie('patrolPersonnelId', record.patrolPersonnelId);
        PublicService.setCookie('WorkAlltakeTime', this.state.time);
        PublicService.setCookie('patrolPersonnelName', record.patrolPersonnelName);


        this.props.history.push("/WordEdit")
    }

    //查看

    onCheck = (record) => {
        PublicService.setCookie('WordDetailsId',record.id)
        this.props.history.push("/WordDetails")
    }

    onDate = (val, v) => {
        console.log(val, v)
        this.setState({
            [val]: v
        })

    }

    //查询按钮
    save = (page, size) => {
        this.setState({
            loading: true
        })
        request({
            url: `/zhrq-web/patrol/patroltask/getPageList`,
            method: 'POST',
            data: {
                startDate: this.state.startDate ? moment(this.state.startDate).format("YYYY-MM-DD HH:mm:ss") : "",
                endDate: this.state.endDate ? moment(this.state.endDate).format("YYYY-MM-DD HH:mm:ss") : "",
                finishTimeEnd: this.state.finishTimeEnd ? moment(this.state.finishTimeEnd).format("YYYY-MM-DD HH:mm:ss") : "",
                finishTimeStr: this.state.finishTimeStr ? moment(this.state.finishTimeStr).format("YYYY-MM-DD HH:mm:ss") : "",
                finished: this.state.finished,
                patrolPersonnelId: this.state.patrolPersonnelId,
                signInWay: this.state.signInWay,
                taskName: this.state.taskName,
                page: page,
                rows: size
            }
        }).then(data => {
            console.log(data)
            if (data.rc == 0) {
                data.ret.items.forEach(item => {
                    item.takeTime = moment(item.takeTime).format("YYYY-MM-DD HH:mm:ss")
                    item.willFinishTime = moment(item.willFinishTime).format("YYYY-MM-DD")
                    if (item.finishTime) {
                        item.finishTime = moment(item.finishTime).format("YYYY-MM-DD HH:mm:ss")
                    }

                });
                this.setState({
                    dataSource: data.ret.items,
                    total: data.ret.rowCount
                })
                setTimeout(() => {
                    this.setState({
                        loading: false
                    })
                }, 500)
            }
        })
    }
    //分页器
    onChangePage = (page, size) => {
        this.save(page, size);
        this.setState({
            page,
            rows: size,
            pageIndex: page,
            pageSize: size
        })
    };

    onTreeSelect = (v, b, n) => {
        console.log(v, b, n)
        this.setState({
            GroupArrMo: v,

            value: v
        })
    }

    onTag = (v) => {
        console.log(v)
        this.setState({
            kcType: v,
            signInWay: v,
            kcType2: 123,
            kcType1: "",
            finished:1
        })
        setTimeout(() => {
            this.save(1, 10)
        },300)
    }

    onTag1 = (v) => {
        console.log(v)
        this.setState({
            kcType1: v,
            kcType: "",
            kcType2: 123,
            finished: v,
            signInWay:""
        })
        setTimeout(() => {
            this.save(1, 10)
        },300)

    }

    onTag2 = (v) => {
        console.log(v)
        this.setState({
            kcType2: "",
            kcType: "",
            signInWay: "",
            finished: "",
            kcType1: ""
        })
        setTimeout(() => {
            this.save(1, 10)
        },300)
    }

    //新增
    addBtnText = (v) => {
        console.log(231)
        this.showModal()
        // this.props.history.push("/WordAdd")
    }

    //下拉
    onSelect = (v, b) => {
        console.log(v, b)
        this.setState({
            patrolPersonnelId: v
        })
    }

    onSelectChange = (keys, rows) => {
        console.log(rows)
        this.setState({
            selectedRowKeys: keys,
            selectedRows: rows
        });
    };

    ondelete = () => {
        console.log(456, this.state.selectedRows)
        if (this.state.selectedRows.length < 1) {
            message.warning("请选择作废任务!")
            return
        }
        let data = []
        this.state.selectedRows.forEach((item) => {
            data.push({
                id: item.id
            })
        })

        request({
            url: `/zhrq-web/patrol/patroltask/cancelTask`,
            method: 'POST',
            data: data
        }).then(data => {
            console.log(data)
            if (data.rc == 0) {
                message.success("作废成功")
                this.save(1, 10)
            }
        })





    }

    render() {
        const { total, loading, selectedRowKeys, dataSource, pageIndex, pageSize, treeData } = this.state
        const columns = this.columns

        const windowWidth = document.body.clientWidth;

        const height = document.body.clientHeight;
        let containerHeight = '74vh';
        if (windowWidth > 1367) {
            containerHeight = '75vh';
        }
        const Option = Select.Option;

        let rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const { cities } = this.state;

        return (
            <div>
                <Modal
                    centered={true}
                    style={{ top: 120, left: 500 }}
                    title="新增任务"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <Row style={{ lineHeight: 3 }}>

                        <Col span={24}>巡查人员 :
                        <Select style={{ width: 200, marginLeft: 5, marginRight: 20 }} onChange={this.onSelect} size="small">

                                {this.state.selectArr &&
                                    this.state.selectArr.map((item, index) => {
                                        return (
                                            <Option key={index} value={item.id}>{item.name}</Option>
                                        )
                                    })
                                }


                            </Select>
                        </Col>

                        <Col span={24}>
                            任务类型 :
                                <Select
                                size="small"
                                defaultValue={provinceData[0]}
                                style={{ marginLeft: 5, width: 200 }}
                                onChange={this.handleProvinceChange}
                            >
                                {provinceData.map(province => <Option key={province}>{province}</Option>)}
                            </Select>

                        </Col>

                        <Col span={24}>
                            巡查任务 :
                            <Select
                                size="small"
                                style={{ marginLeft: 5, width: 200 }}
                                value={this.state.secondCity}
                                onChange={this.onSecondCityChange}
                            >
                                {cities.map(city => <Option key={city}>{city}</Option>)}
                            </Select>
                        </Col>


                        <Col span={24}>
                            预计完成时间 :
                                <DatePicker size="small" onChange={this.onDate.bind(this, "typeTime")} style={{ marginLeft: 5 }} />
                        </Col>
                    </Row>
                </Modal>
                <Card className={style.Top_box}
                    bodyStyle={{ padding: "6px 24px" }}
                >

                    <Row style={{ lineHeight: 3 }}>
                        <Col span={12}>分配时间 : <DatePicker size="small" onChange={this.onDate.bind(this, "startDate")} value={this.state.startDate} /> 到  <DatePicker size="small" onChange={this.onDate.bind(this, "endDate")} value={this.state.endDate} /> </Col>
                        <Col span={8}>巡查人员 :
                        <Select defaultValue="" style={{ width: 120, marginLeft: 5, marginRight: 20 }} onChange={this.onSelect} size="small">
                                <Option value={""}>全部</Option>
                                {this.state.selectArr &&
                                    this.state.selectArr.map((item, index) => {
                                        return (
                                            <Option key={index} value={item.id}>{item.name}</Option>
                                        )
                                    })
                                }


                            </Select>
                            <Button type="primary" size="small" onClick={this.save.bind(this, 1, 10)}>查询</Button> <Button size="small">重置</Button>
                        </Col>
                    </Row>

                    <Row style={{ lineHeight: 2 }}>
                        <Col span={12}>实际完成时间: <DatePicker size="small" onChange={this.onDate.bind(this, "finishTimeStr")} value={this.state.dafinishTimeStrte} /> 到  <DatePicker size="small" onChange={this.onDate.bind(this, "finishTimeEnd")} value={this.state.finishTimeEnd} /> </Col>
                        <Col span={12}> <span>任务类型 : </span>
                            <Select defaultValue=" " style={{ width: 200 }} onChange={this.ontype} size="small">
                                <Option value=" ">全部</Option>
                                <Option value="供应站点巡查">供应站点巡查</Option>
                                <Option value="商业用户巡查">商业用户巡查</Option>

                            </Select>
                        </Col>
                    </Row>
                </Card>
                <Container
                    style={{ height: containerHeight, position: "relative", marginTop: "0.5vh", padding: "0px 10px" }}
                    // header={true}
                    addBtnShow={true}
                    addBtnText={this.addBtnText}
                >
                    <div className={style.Con_header}>
                        <span style={{ cursor: "pointer", marginRight: 10 }} onClick={this.ondelete}> <Icon type="delete" style={{ color: "red", marginLeft: 5 }} />作废</span>
                        <span> 完成状态 : </span>
                        <Tag color={this.state.kcType2 === "" ? "#108ee9" : "blue"} onClick={this.onTag2.bind(this, "")}>全部</Tag>
                        <Tag color={this.state.kcType === 1 ? "#CCCC00" : "yellow"} onClick={this.onTag.bind(this, 1)}>站点签到</Tag>
                        <Tag color={this.state.kcType === 2 ? "#008000" : "green"} onClick={this.onTag.bind(this, 2)}>检查表&站点签到</Tag>

                        <Tag color={this.state.kcType1 === 0 ? "#FF0000" : "red"} onClick={this.onTag1.bind(this, 0)}>未完成</Tag>
                        <Tag color={this.state.kcType1 === 2 ? "#722ed1" : "purple"} onClick={this.onTag1.bind(this, 2)}>已作废</Tag>
                    </div>
                    <div style={{ height: "65vh", overflow: "auto" }}>
                        <MyTable
                            // bordered
                            loading={loading}
                            columns={columns}
                            rowSelection={rowSelection}
                            pagination={false}
                            // scroll={{ y: windowWidth < 1400 ? height - 280 : height - 300 }}
                            dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                        />

                    </div>
                    <MyPagination

                        showPage
                        pageSize={pageSize}
                        current={pageIndex}
                        total={total}
                        showSizeChanger
                        showQuickJumper
                        onChange={this.onChangePage}
                        onShowSizeChange={this.onChangePage}
                    />
                </Container>
            </div>
        )
    }
}
export default (WorkAll);
